import { Card, Descriptions, Button, Image } from 'antd'
import { HospitalDetailType } from '@api/hospital/model/hospitalListTypes'
import { reqGetHospitalDetail } from '@api/hospital/hospitalList'
import { useNavigate, useParams } from 'react-router-dom'
import { useEffect, useState } from 'react'

const { Item } = Descriptions

export default function HospitalDetail() {
  // 声明要初始化的信息
  const [hospitalDetail, setHospitalDetail] = useState<HospitalDetailType>({
    bookingRule: {
      cycle: 0,
      releaseTime: '',
      stopTime: '',
      quitTime: '',
      rule: [],
    },
    hospital: {
      id: '',
      createTime: '',
      param: {
        hostypeString: '',
        fullAddress: '',
      },
      hoscode: '',
      hosname: '',
      hostype: '',
      provinceCode: '',
      cityCode: '',
      districtCode: '',
      logoData: '',
      intro: '',
      route: '',
      status: 0,
    },
  })

  // 声明路由的 hooks
  const params = useParams()
  // 声明编程式导航的方法
  const navigate = useNavigate()

  useEffect(() => {
    ;(async () => {
      // 由于id是由params点出来的，所以也没有办法直接去做限制
      // 只能建议做断言 - 只能这么写
      const res = await reqGetHospitalDetail(params.id as string)
      console.log(res)
      setHospitalDetail(res)
    })()
  }, [])

  const { hospital, bookingRule } = hospitalDetail

  return (
    <Card>
      {/* 1. 基本信息 */}
      {/* 
        bordered 添加边框
        title    显示在上面的标题
        size     显示尺寸  middle  small
        column   显示几列
      */}
      <Descriptions
        title="基本信息"
        bordered
        size="small"
        column={2}
        labelStyle={{
          width: 120,
        }}
      >
        <Item label="医院名称">{hospital.hosname}</Item>
        <Item label="医院LOGO">
          <Image
            style={{
              width: 80,
            }}
            src={`data:image/jpg;base64,${hospital.logoData}`}
          />
        </Item>
        <Item label="医院编码">{hospital.hoscode}</Item>
        <Item label="医院地址">{hospital.param.fullAddress}</Item>
        {/* span={2}  跨列，合并2列 */}
        <Item label="医院路线" span={2}>
          {hospital.route}
        </Item>
        <Item label="医院简介" span={2}>
          {hospital.intro}
        </Item>
      </Descriptions>

      {/* 2. 预约规则信息 */}
      <div
        style={{
          padding: '45px 0',
        }}
      >
        <Descriptions
          labelStyle={{
            width: 120,
          }}
          title="预约规则信息"
          bordered
          size="small"
          column={2}
        >
          <Item label="预约周期">{bookingRule.cycle}</Item>
          <Item label="放号时间">{bookingRule.releaseTime}</Item>
          <Item label="停挂时间">{bookingRule.stopTime}</Item>
          <Item label="退号时间">{bookingRule.quitTime}</Item>
          {/* span={2}  跨列，合并2列 */}
          <Item label="预约规则" span={2}>
            {bookingRule.rule}
          </Item>
        </Descriptions>
      </div>

      {/* 3. 返回 */}
      <Button
        type="primary"
        onClick={() => navigate('/syt/hospital/hospitallist')}
      >
        返回
      </Button>
    </Card>
  )
}
